<!-- 
/* ************************************************************************
 *                        _oo0oo_
 *                       o8888888o
 *                       88" . "88
 *                       (| -_- |)
 *                       0\  =  /0
 *                     ___/`---'\___
 *                   .' \\|     |// '.
 *                  / \\|||  :  |||// \
 *                 / _||||| -:- |||||- \
 *                |   | \\\  - /// |   |
 *                | \_|  ''\---/''  |_/ |
 *                \  .-\__  '-'  ___/-. /
 *              ___'. .'  /--.--\  `. .'___
 *           ."" '<  `.___\_<|>_/___.' >' "".
 *          | | :  `- \`.;`\ _ /`;.`/ - ` : | |
 *          \  \ `_.   \_ __\ /__ _/   .-` /  /
 *      =====`-.____`.___ \_____/___.-`___.-'=====
 *                        `=---='
 * 
 * 
 ************************************************************************
 *		本代码已经过佛祖开光处理，佛祖保佑，永不宕机，永无BUG。
 *		文件名称：略
 *		简要描述：抽奖页面
 *		作   者：Frank
 *		创建日期：2023/08/06
 *		联系方式：邮箱: goodboybbc@outlook.com, 微信：goodboybbc 可提供后台源码(Node.js开发)和数据库(MySQL)

 *		Copyright(c)	2023-2033   Frank   本项目已取得软件著作权和备案，仅供学习研究。软件著作权登记号：软著登字第12572259号 备案号:川公网安备51012202001748 蜀ICP备2024058077号-1 
 ********************************修改记录********************************
		作	者			修改日期				修改内容 
		Frank			2023/08/06			创建文件
 *************************************************************************/	
 -->
<template>
	<view class="main">
		<ModalDialog v-if="isShowDlg" :data="dlgData"></ModalDialog>
		<view class="title">
			<image class="title-img" src="../../static/img/lottery/title.png" mode=""></image>
		</view>
		<view class="turnplate-box">
			<view class="turnplate" :animation="animationData" >
				<view class="turnplate-part" 
					v-for="(item,index) in list" 
					:key="index"
					:style="{transform:'rotate('+index*40+'deg)'}"
				>
					<view >{{item.name}}*{{item.num}}</view>
					<image class="turnplate-part-img" :src="item.img" mode=""></image>
				</view>
			</view>
			<view class="turnplate-center" @tap="onLottery">
				<image class="turnplate-center-img" src="../../static/img/lottery/center.png" mode=""></image>
			</view>
		</view>
		<view class="count">
			<view class="count-num">每次抽奖花费:{{configStore.config.lottery.cost}}水晶</view>
			<view class="">
				<view class="count-btn">
					<view class="count-btn-lottery" @tap="onLottery">抽奖</view>
				</view>				
			</view>
		</view>
	</view>
</template>

<script>
	import $http from '@/common/api/request.js'
	import utility from '@/common/utility.js'
	import ModalDialog from '../../components/common/ModalDialog'
	import { mapStores, mapActions, mapState } from 'pinia'
	import { userStore } from '@/store/modules/userStore.js'	
	import { configStore } from '@/store/modules/configStore.js'
	export default {		
		components:{
			ModalDialog
		},
		data() {
			return {
				list:[],
				animationData: {},
				animation:{},
				curDeg:0,
				index:0,
				isRotating:false,
				// 对话框
				isShowDlg:false,
				dlgData:{
					title:'',
					text:'',
					cbTap:()=>{}
				}
			}
		},
		computed:{
			...mapStores(userStore, configStore)
		},		
		methods: {
			onAddNum(){
				$http.request({
					url:'lottery/add_lottery',
					token:true
				}).then( res => {
					let lotteryNum = res.data.lottery_num;
					this.userStore.setlotteryNum(lotteryNum);
					
				}).catch( (e) => {
					uni.showToast({
						title:e,
						icon:'none'
					})
				});				
			},
			onLottery(){
				if(this.isRotating) return;
				$http.request({
					url:'lottery/do',
					token:true
				}).then( res => {
					let index = res.data.index;
					let crystal = res.data.crystal;
					let lottery = this.list[index];
					if(!lottery) return;
					
					switch(lottery.type){
						case 1:{
							this.userStore.user.crystal = crystal;
							break;
						}
						default:{
							break;
						}
					}					
					
					let tarDeg = this.curDeg + (360 - this.curDeg%360) + 360*3 + (9-index)*40;
					this.animation.rotate(tarDeg).step();
					this.animationData = this.animation.export();
					this.curDeg = tarDeg;
					this.index = index;
					this.isRotating = true;	
					let lottery_day_num = res.data.lottery_day_num;
					let task_lottery_flag = res.data.task_lottery_flag;
					this.userStore.user.lottery_day_num = lottery_day_num;
					this.userStore.user.task_lottery_flag = task_lottery_flag;
					
					setTimeout(() => {
						this.dlgData.title = '奖 品';
						this.dlgData.text = `恭喜您，获得${lottery.name}*${lottery.num},继续加油，奥利给~`
						this.dlgData.btnText = '好的'
						this.dlgData.cbTap = () => {
							this.isShowDlg = false;
						}
						this.isShowDlg = true;	
						this.isRotating = false;
					}, 1000*10);
					
				}).catch( (e) => {
					uni.showToast({
						title:e,
						icon:'none'
					})
				});
			}
		},
		onLoad() {
			var animation = uni.createAnimation({
				duration: 1000*10,
				timingFunction: 'ease',
			})
		
			this.animation = animation;
			
			this.list = [];
			let prize = this.configStore.config.lottery.list;
			for(let i = 0; i < prize.length; i++){
				let item = prize[i];
				switch(item.type){
					case 1:{
						item.name="水晶";
						item.img = "../../static/img/common/sj88.png"
						break;
					}
					case 3:{
						break;
					}
					default:{
						break;
					}
				}
				this.list.push(item);
			}
		}
	}
</script>

<style scoped>
	.main{
		widows: 100vw;
		height: 100vh;
		background-image: url('../../static/img/lottery/bg.png');
		background-size: 100% 100%;
	}
	.title{
		padding-top: 130rpx;
		display: flex;
		justify-content: center;
	}
	.title-img{
		width: 552rpx;
		height: 176rpx;
	}
	.turnplate-box{
		display: flex;
		justify-content: center;
		padding: 25rpx 0;
		position: relative;
		left: 0;
		top: 0;
	}
	.turnplate{
		width: 668rpx;
		height: 668rpx;
		background-image: url("../../static/img/lottery/turnplate.png");
		background-repeat: no-repeat;
		background-size: 100% 100%;
		display: flex;
		justify-content: center;
		align-items: center;
		position: relative;
		left: 0;
		top: 0;
	}
	.turnplate-center{
		width: 100%;
		height: 100%;
		position: absolute;
		left: 0;
		top: 0;
		display: flex;
		justify-content: center;
		align-items: center;
		z-index: 999;
	}
	.turnplate-center-img{
		width: 124rpx;
		height: 138rpx;
	}
	.turnplate-part{
		width: 300rpx;
		height: 100%;
		padding-top: 60rpx;
		position: absolute;
		left: 184rpx;
		top:0;
		display: flex;
		flex-direction: column;
		align-items: center;
		color: #3518A1;
		font-size: 28rpx;		
	}
	.turnplate-part-img{
		width: 88rpx;
		height: 88rpx;
		margin-top: 10rpx;
		transform: rotate(-30deg);
	}
	.count{
		display: flex;
		flex-direction: column;
		align-items: center;
	}
	.count-num{
		color: #A5A0F7;
	}
	.count-btn{
		color: white;
		font-size: 28rpx;
		display: flex;
		padding-top: 30rpx;
		justify-content: center;
		align-items: center;
	}
	.count-btn-lottery{
		width: 240rpx;
		height: 80rpx;
		background-image: url('../../static/img/common/btn/5.png');
		background-size: 100% 100%;
		display: flex;
		justify-content: center;
		align-items: center;
	}
</style>
